import React, {useEffect, useRef, useState} from 'react';
import {Flex, Image, Space} from 'antd';
import {
    DownloadOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
    PlusCircleOutlined,
    PlusOutlined
} from '@ant-design/icons';
import VideoWallpaperTag from '../assets/video-wallpaper.svg';
import {useNavigate} from "react-router-dom";


export interface WallpaperEntity {
    path: string;
    name: string;
    id: number;
    previewPath: string;

    tag: string;
    description: string;
    score: number;
    officialScore: number;
    interactScore: number;
    status: number;

    likes:number;
    dislikes:number;
    shares:number;
    subscribes:number;

}

function isVideo(path: string): boolean {
    const ext = path.split('.').pop();
    return ext === 'mp4';
}
function WallpaperObject({ wallpaper }: { wallpaper: WallpaperEntity }) {


    const navigate = useNavigate();
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
    };
    const onDownload = () => {
        fetch(wallpaper.path)
            .then((response) => response.blob())
            .then((blob) => {
                const url = URL.createObjectURL(new Blob([blob]));
                const link = document.createElement('a');
                link.href = url;
                if (isVideo(wallpaper.path)){
                    link.download = wallpaper.name+'.mp4';
                } else {
                    link.download = wallpaper.name+'.png';
                }
                document.body.appendChild(link);
                link.click();
                URL.revokeObjectURL(url);
                link.remove();
            });
    };

    const onApplyWallpaper = () => {
        // 预期：跳转到另一个页面（带小尾巴），或者发送id到background.js
        console.log("应用壁纸“"+wallpaper.name+"”："+wallpaper.id);
    }

    const jumpToDetail = () =>{
        navigate('/detail/'+wallpaper.id);
    }

    if (isVideo(wallpaper.path)) {
        // 动态壁纸
        return <div className="wallpaper-preview" style={{margin:"8px"}}>
            <Image
                onClick={jumpToDetail}
                src={wallpaper.previewPath.replace("{width}","600").replace("{height}","400")}
                className={"image-preview"}
                style={{borderRadius:"8px",
                    width: '30vw',
                    height: '20vw',
                    maxWidth : '300px',
                    maxHeight : '200px'
                }}
                alt={wallpaper.name}
            />

            <Flex vertical={false}
                  style={{position:"absolute",
                      top:"5px",
                      width:"100%",
                      flexDirection:"row-reverse"}}
                  className={"wallpaperButtonDiv"}
            >
                <button
                    style={{
                        background: "rgba(0, 0, 0, 0.5)",
                        border: "none",
                        borderRadius: "5px",
                        cursor: "pointer"
                    }}
                    className={"wallpaperOpButton wallpaperApplyButton"}
                    onClick={onApplyWallpaper}
                    data-id={wallpaper.id}
                >

                    <PlusOutlined />
                    应用
                </button>
                <button
                    style={{
                        background: "rgba(0, 0, 0, 0.5)",
                        border: "none",
                        borderRadius: "5px",
                        cursor: "pointer"
                    }}
                    className={"wallpaperOpButton"}
                    onClick={onDownload}
                >

                    <DownloadOutlined />
                    下载
                </button>
            </Flex>
            <div className={"wallpaperNameBanner"}
                 style={{
                     background: "rgba(0, 0, 0, 0.5)",
                     color: "#fff",
                     position:"absolute",
                     width:"31vw",
                     maxWidth:"310px",
                     bottom:"0",
                     textAlign: "center",
                     borderRadius:"0 0 6px 6px"
                 }}>
                {wallpaper.name}
            </div>


            <img
                src={VideoWallpaperTag}
                alt="动态视频"
                style={{
                    position:"absolute",
                    top: "0",
                    left: "-1px",
                    width:"80px",
                    height:"60px",
                    zIndex:"1",
                }}
            />
            </div>;

    } else {
        // 静态壁纸
        return (
            <div className="wallpaper-preview" style={{margin:"8px"}}>
                <Image

                    className={"image-preview"}
                    style={{borderRadius:"8px",
                        width: '30vw',
                        height: '20vw',
                        maxWidth : '300px',
                        maxHeight : '200px'
                    }}
                    alt={wallpaper.name}
                    src={wallpaper.path}
                    onClick={jumpToDetail}
                />
                <Flex vertical={false}
                    style={{position:"absolute",
                    top:"5px",
                    width:"100%",
                    flexDirection:"row-reverse"}}
                      className={"wallpaperButtonDiv"}
                >
                    <button
                        style={{
                            background: "rgba(0, 0, 0, 0.5)",
                            border: "none",
                            borderRadius: "5px",
                            cursor: "pointer"
                        }}
                        className={"wallpaperOpButton wallpaperApplyButton"}
                        onClick={onApplyWallpaper}
                        data-id={wallpaper.id}
                    >

                        <PlusOutlined />
                        应用
                    </button>
                    <button
                        style={{
                            background: "rgba(0, 0, 0, 0.5)",
                            border: "none",
                            borderRadius: "5px",
                            cursor: "pointer"
                        }}
                        className={"wallpaperOpButton"}
                        onClick={onDownload}
                    >

                        <DownloadOutlined />
                        下载
                    </button>
                </Flex>
                <div className={"wallpaperNameBanner"}
                     style={{
                         background: "rgba(0, 0, 0, 0.5)",
                         color: "#fff",
                         position:"absolute",
                         width:"31vw",
                         maxWidth:"310px",
                         bottom:"0",
                         textAlign: "center",
                         borderRadius:"0 0 6px 6px"
                     }}>
                    {wallpaper.name}
                </div>
            </div>
        );
    }


}

export default WallpaperObject;